<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>博远供应商图纸系统</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_685641_ujvm3qaahmcs1yvi.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_720909_eabvt9685ps.css">
    
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="__STATIC__/css/index.css">
</head>
<body>
    <div class="col-md-12 navbox clearfix">
        <nav class="navbar">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                      <span class="sr-only">博远供应商图纸系统</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://192.168.1.133"><img src="http://192.168.1.133/skin/static/img/logo.png" alt="博远集团"></a>
                  </div>
                  <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav nav-pills">
                        {volist name="list" id="navlist"}
                        <li class='{eq name="$navlist.id" value="$typeid"}active{/eq}'><a href="{:url('index/index/index',['id'=>$navlist.id])}">{$navlist.name}</a></li>
                        {/volist}
                    </ul>
                    <ul class="nav navbar-nav">
                      <li class="yellow line" style="margin: 0"><a href="javascript:;">/</a></li>
                      <li class="yellow"><a href="javascript:;" onclick="msgg()">采购询价单</a></li>
                      <li class="yellow"><a target="_blank" href="http://39.107.91.75/mysteel/public/">每日钢材报价</a></li>
                    </ul>
                  </div><!--/.nav-collapse -->
                </div><!--/.container-fluid -->
              </nav>
    </div>
    <div class="container clearfix" style="width: 98%;margin: auto;clear: both;">
        <h1 class="text-center">博远供应商图纸系统</h1>
        <div class="itembox1 col-md-5">
            <h4 class="sub-title">选择设计图</h4>
            
                <div class="search-box">
                    <span class="name pull-left">搜索</span>
                    <input id="searchBox" type="text" class="form-control pull-left" placeholder="请输入名称/型号规格/产品编号/BOM编码">
                </div>

                <!-- 二级分类tab卡 -->
                <div class="item-box list-desgin">                    
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        {volist name="typeArr" key='k' id="v"}
                        {if condition="$k==1"} 
                        <li role="presentation" class="active"><a href="#tab{$k}" aria-controls="tab{$k}" role="tab" data-toggle="tab">{$v.name}</a></li>
                        {else/}
                        <li role="presentation" class=""><a href="#tab{$k}" aria-controls="tab{$k}" role="tab" data-toggle="tab">{$v.name}</a></li>
                        {/if}
                        {/volist}
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        {volist name="typeArr" key='k' id="v"}
                        <div role="tabpanel" class="tab-pane active" id="tab{$k}">
                            <div class="table-responsive">
                                <table class="tableBox table table-hover">   
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>名称</th>
                                                <th>型号规格</th>
                                                <th>产品编号</th>
                                                <th>BOM编码</th>
                                                <th>操作</th>
                                            </tr>                                            
                                        </thead>               
                                        <tbody>
                                            {volist name="v['child']" id="tablist"}
                                            <tr id="{$tablist.id}">
                                                <th> <input type="checkbox"> </th>
                                                <td>{$tablist.name}</td>
                                                <td>{$tablist.xinghao}</td>
                                                <td>{$tablist.chanpingbianhao}</td>
                                                <td>{$tablist.bom}</td>
                                                <td>
                                                    <a class="checkTz" href="javascript:;">查看</a>
                                                    <div class="imgbox" style="display: none;">
                                                        <img class="img-responsive" src="{$tablist.imgpath}" alt="">
                                                        <p class="des">点击放大图片<i class="iconfont icon-sousuo"></i></p>
                                                    </div>
                                                </td>
                                            </tr>
                                            {/volist}                
                                        </tbody>
                                    </table>
                            </div>                            
                        </div>
                        {/volist}                       
                    </div>                    
                </div>
                <!-- 二级分类tab卡 end-->
        </div>
        <div class="itembox2 col-md-5 hidden-sm">
            <h4 class="sub-title">已选设计图</h4>
            <div class="item-box list-desgin">
                <div class="table-responsive">
                    <table id="ownTable" class="table table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>型号规格</th>
                                <th>产品编号</th>
                                <th>BOM编码</th>
                                <th>操作</th>
                            </tr>
                        </thead>         
                    <tbody>
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="itembox3 col-md-2">
            <h4 class="sub-title hidden-sm">设置下载压缩包</h4>
            <div class="form-box">
                <div class="clearfix">
                     <label class="label-box"><span class="c-danger">*</span>外协公司:</label>
                     <!-- <div class="input-box">  -->
                        <input id="company" type="text" class="form-control" placeholder="请填写外协公司名">
                        <p class="c-danger">*注：本公司生产填写“博远”</p>
                     <!-- </div> -->
                </div>
                <div class="clearfix">
                     <label class="label-box">备&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
                     <!-- <div class="input-box">  -->
                        <input id="remark" type="text" class="form-control" placeholder="请填写相关描述/选填">
                     <!-- </div> -->
                </div>
                <div class="form-group">
                    <label class="label-box"></label>
                    <div class="input-box">                          
                      <button class="btn btn-primary download">下载</button>
                      <p class="c-danger">注：文件名为 公司 + 类型 + 备注 + 年月日.zip</p>
                    </div>
                </div>

                <div class="inwebsite">                    
                    <a target="_blank" href="http://192.168.1.133"><i class="iconfont icon-lubiao" style="color:#ff8401;font-size: 50px;"></i>点击进入官网</a>
                </div>
            </div>
        </div>
    </div>


    <!-- <input type="button" value="弹出下载对话框" onclick="openDownloadDialog('https://www.baidu.com','fdfdf')"/> -->



    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
    <script>
        //正在开发中的提醒
        function msgg(){
            layer.msg("攻城狮正在研发中，请耐心等待...")
        };



        var oTable = $(".tableBox>tbody");
        //搜索图纸
        $("#searchBox").on("keyup",function(){
            var txt = $(this).val();
            if(txt == ''){
                oTable.find("tr").show();
            }else{
                oTable.find("tr").hide().filter(':contains("'+txt+'")').show();
            }
        })

        //勾选设计图 Tina 2018年6月1日23:33:39        
        $(document).on("click",".tableBox input[type='checkbox']",function(){
            var oStatus = $(this).prop("checked");
            var name = $(this).parent().next().html();
            var name2 = $(this).parent().next().next().html();
            var name3 = $(this).parent().next().next().next().html();
            var name4 = $(this).parent().next().next().next().next().html();
            var id=$(this).parents('tr').attr('id');
            var path = $(this).parents('tr').data('path');
            // alert(oStatus);
            if(oStatus == true){
                $("#ownTable").append('<tr id="'+id+'"><td width="15%">'+name+'</td><td width="23%">'+name2+'</td><td width="23%">'+name3+'</td><td width="25%">'+name4+'</td><td width="10%"><a href="javascript:;" class="deleteBtn">删除</a></td></tr>');
            }else if(oStatus == false){
                $("#ownTable").find("#"+id).remove();
            }
        })

        // 删除图纸
        $(document).on("click",".deleteBtn",function(){ 
            $(this).parents("tr").remove();
            //取消左边选择框的选中状态
            var id=$(this).parents('tr').attr('id');
            oTable.find("#"+id).children("th").children("input[type='checkbox']").prop("checked",false);
        })
        //查看图纸
        $(".checkTz").on("click",function(){
            var imgpath = $(this).next().html(); 
            $(this).css({'color':'#825877'})        
            layer.open({
                title:"",
                btn:"",
                // area: '80%',
                area:'auto',
                maxWidth:'90%',
                content: imgpath
            }); 
            $('.layui-layer-content').zoom({
                on:'click'
            })
        })
        //放大查看图纸后的图片
        // $('a.photo').zoom({
        //     url: 'photo-big.jpg', 
        //     callback: function(){
        //     $(this).colorbox({href: this.src});
        //     }
        // });
        
        //进入官网的动效
        $(".inwebsite").hover(function() {
            $(this).addClass("animated swing")
        }, function() {
            $(this).removeClass("animated swing")
        })
    </script>
    <script>
        //点击二级类别切换数据
        $("#tabTitle>div>button").on("click",function(){
            var type = $(this).data("type");
            console.log(type);
            $.ajax({
                url:"{:Url('index/Api/getFile')}",
                type:"post",
                dataType:"json",
                data:{
                    'type':type
                },
                success:function(result){                
                    var data = JSON.parse(result);
                    console.log(data);
                    console.log(data['code']);
                    if(data.code == 200){
                        $("#table tbody").html('');//清空一下
                        for(var i=0;i<data['data'].length;i++){
                            $("#table tbody").append('<tr id="'+data['data'][i].id+'"><th width="5%"><input type="checkbox"></th><td width="15%">'+data['data'][i].name+'</td><td width="23%">'+data['data'][i].xinghao+'</td><td width="23%">'+data['data'][i].chanpingbianhao+'</td><td width="25%">'+data['data'][i].bom+'</td><td width="10%"><a class="checkTz" href="javascript:;">查看</a><div style="display: none;"><img src="'+data['data'][i].imgpath+'" alt=""></div></td></tr>');
                        }
                    }                
                }
            })
        })
        
        

        // 下载
        $(".download").on("click",function(){            
            //图纸数据拼接
            var downList = $("#ownTable tbody tr");
            var downLists = "";
            for(i=0;i<downList.length;i++){
                if(downLists==""){
                    downLists = downList[i].getAttribute("id");
                }else{
                    downLists = downLists+","+downList[i].getAttribute("id");
                }
            }
            console.log(downLists);
            if(downLists == ""){
                layer.alert("请选择需要下载的图纸！");return false;
            }
            if($("#company").val() == ""){
                layer.alert("请填写外协公司！");return false;
            }

            //密码下载
            // layer.prompt({title: '请输入下载密码，并确认', formType: 1}, function(pass, index){ 
            //     layer.close(index);
            //     $.ajax({
            //         url:"{:Url('index/Api/zip')}",
            //         type:"post",
            //         dataType:"json",
            //         data:{
            //             "path":downLists,
            //             "company": $("#company").val(),
            //             "remark":$("#remark").val(),
            //             "fid":$("#ownTable tbody tr:first-child()").attr("id"),
            //             // "password":pass,
            //         },
            //         success:function(result){               
            //             var data = JSON.parse(result);
            //             console.log(data);
            //             if(data.code == 200){
            //                 window.open(data.data);
            //             }                
            //         }
            //     })
            // });
            // 
            layer.confirm('确定下载吗？', function(index){ 
                layer.close(index);
                $.ajax({
                    url:"{:Url('index/Api/zip')}",
                    type:"post",
                    dataType:"json",
                    data:{
                        "idstring":downLists,
                        "company": $("#company").val(),
                        "remark":$("#remark").val(),
                        "fid":$("#ownTable tbody tr:first-child()").attr("id"),
                    },
                    success:function(result){               
                        var data = JSON.parse(result);
                        console.log(data);
                        if(data.code == 200){
                            window.location.href=data.data;    
                            // openDownloadDialog(data.data,'name');                        
                        }                
                    }
                })
            });
        })

/**
 * 通用的打开下载对话框方法，没有测试过具体兼容性
 * @param url 下载地址，也可以是一个blob对象，必选
 * @param saveName 保存文件名，可选
 */
function openDownloadDialog(url, saveName)
{
    if(typeof url == 'object' && url instanceof Blob)
    {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if(window.MouseEvent) event = new MouseEvent('click');
    else
    {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}


    </script>
</body>
</html>